@import '~/common/style/index.scss';
$suggestList-prefix-cls: #{$cui-prefix}-suggest;

.#{$suggestList-prefix-cls} {
  box-sizing: border-box;
  position: fixed;
  border-radius: 16px;
  padding: 4px 8px;
  border: 1px solid $gray-95;
  background: $gray-98;
  user-select: none;
  box-shadow: 0px 24px 36px 0px rgba(70, 78, 83, 0.15), 8px 0px 24px 0px rgba(23, 26, 28, 0.08);

  & {
    .active {
      background: $white;
    }
  }

  &-dark{
    background-color: $gray-1;
    border: 1px solid $gray-3;
    .#{$suggestList-prefix-cls}-item{
      background-color: $gray-1;
    }
    .#{$suggestList-prefix-cls}-item:hover{
      background-color: $gray-2;
    }
    .#{$suggestList-prefix-cls}-list{
      scrollbar-color: $gray-4 transparent;
    }
  }
}

.#{$suggestList-prefix-cls}-list {
  min-width: 220px;
  max-height: 202px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: $gray-8 transparent;
    
}

.#{$suggestList-prefix-cls}-item {
  display: flex;
  align-items: center;
  padding: 6px 12px 6px 8px;
  border-radius: 8px;
  font-size: $font-size-base;
  line-height: 20px;
  font-weight: 500;
  margin-top: 4px;
  margin-bottom: 4px;
  background: $gray-98;
  cursor: pointer;

  .avatar {
    margin-right: 8px;
  }
}
.#{$suggestList-prefix-cls}-item:hover {
  background: $gray-9;
}